<template>
  <div
    class="m-tr"
    :style="{ transform: `translate3d(0,${scrollYDistance}px,0)` }"
  >
    <slot name="rowSelection"></slot>
    <slot />
  </div>
</template>

<script>
import { toRefs } from "vue";
export default {
  props: {
    scrollYDistance: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    let { scrollYDistance } = toRefs(props);
    return {
      scrollYDistance,
    };
  },
};
</script>


<style lang="scss" scoped>
.m-tr {
  display: flex;
  border-bottom: 1px solid #ccc;
  align-items: center;
  .m-td {
    padding: 0 12px;
    line-height: 50px;
    border-right: 1px solid #ccc;
    height: 50px;
    > div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.m-tr:last-child {
  border-bottom: none;
}
</style>